import React, { Component } from "react";

// 受控组件,由我们自己来控制input里面内容的做法
// 当input有了value属性和onChange事件，那么input就变成受控组件了

class App extends Component {
  state = {
    textValue: "123",
  };

  handChange = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };

  render() {
    return (
      <>
        <h2>form表单受控组件</h2>
        <p>textValue: {this.state.textValue}</p>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handChange}
        />
      </>
    );
  }
}

export default App;
